<template>
  <div>
    <div class="title">
      <h5>Blank Canvas</h5>
      <p>Start a new drawing. Max 128 pixels in width and height.</p>
    </div>
    <div class="input-wrapper">
      <label>Width</label>
      <input @blur="width=!width?32:width" v-model="width" />
    </div>
    <div class="input-wrapper">
      <label>Height</label>
      <input @blur="height=!height?32:height" v-model="height" />
    </div>
    <ul class="select-warpper">
      <li
        @click.stop="width = height = item.value"
        v-for="(item, index) in list"
        :key="index"
      >
        <h6>{{ item.name }}</h6>
        <p>{{ item.value }}x{{ item.value }}</p>
      </li>
    </ul>
    <div class="input-wrapper">
      <button @click="onNewDraw">New Drawing</button>
    </div>
  </div>
</template>

<script>
export default {
  name:"New Drawing",
  props: {
    onClose: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      width: 32,
      height: 32,
      list: [
        {
          name: "favicon",
          value: 16,
        },
        {
          name: "24x24",
          value: 24,
        },
        {
          name: "32x32",
          value: 32,
        },
        {
          name: "64x64",
          value: 64,
        }
      ],
    };
  },
  watch: {
    width(v) {
      if (isNaN(+v)) this.width = 64;
      if (v<0) this.width = 16;
      if (v > 128) this.width = 128;
    },
    height(v) {
      if (isNaN(+v)) this.height = 64;
      if (v<0) this.height = 16;
      if (v > 128) this.height = 128;
    },
  },
  created() {},
  mounted() {},
  methods: {
    onNewDraw() {
      this.onClose();
      this.$bus.$emit("new", {
        width: this.width,
        height: this.height,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.select-warpper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  li {
    width: 24%;
    margin-top: 20px;
    height: 60px;
    display: flex;
    cursor: pointer;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    background-color: #444;
    line-height: normal;
    text-align: center;
    font-family: "Oswald";
    color: #fff;
    transition: 0.3s all;
    &:hover {
      transform: translateY(-3px);
    }
    &:active {
      transform: scale(1.03);
      background-color: #333;
    }
    h6 {
      font-size: 14px;
      text-transform: uppercase;
    }
    p {
      font-size: 12px;
      opacity: 0.5;
    }
  }
}
.input-wrapper {
  font-family: "Oswald";
  margin-top: 20px;
  label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 7px;
    font-weight: normal;
    display: block;
  }
  input {
    border: thin solid #ccc;
    background-color: #444;
    border-color: #444;
    color: #fff;
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    outline: none;
    font-size: 14px;
    font-family: "Oswald";
  }
  button {
    width: 100%;
    margin-top: 0;
    display: block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.5px;
    height: 42px;
    border-radius: 6px;
    background-color: rgb(169, 80, 172);
    outline: none;
    border: 0;
    font-family: "Oswald";
    transition: 0.3s all;
    &:active {
      transform: scale(1.01);
    }
  }
}
.title {
  position: relative;
  width: 100%;
  font-family: "Oswald";
  margin-bottom: 10px;
  h5 {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
  }
  p {
    color: #999;
    line-height: 18px;
    margin-top: 10px;
    font-size: 14px;
  }
}
</style>
